<template>
  <view class="adress-container" @click="addAddress">
    <!-- 添加收货地址 -->
    <view class="add-adress" v-if="JSON.stringify(address) === '{}'"><button type="primary" size="mini" @click="addAddress">添加收货地址+</button></view>
    <!-- 收货地址详情 -->
    <view class="adress-info" v-else>
      <!-- 收货人 -->
      <view class="row1">
        <view class="user">
          <view class="userinfo">收货人：</view>
          <view class="username">{{ address.userName }}</view>
        </view>
        <!-- 电话 -->
        <view class="phone">
          <view class="phone-name">电话：</view>
          <view class="phone-info">{{ address.telNumber }}</view>
          <uni-icons type="arrowright" size="14"></uni-icons>
        </view>
      </view>
      <!-- 详细地址 -->
      <view class="row2">
        <!-- 收货地址 -->
        <view class="user-adress">收货地址：</view>
        <!-- 地址详情 -->
        <view class="adress">{{ addressInfo }}</view>
      </view>
    </view>
    <!-- 底部图片 -->
    <image src="/static/cart_border@2x.png"></image>
  </view>
</template>

<script>
  // 从vuex中按需导入
  import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {
      // address: {}
    };
  },
  computed: {
    ...mapState('user', ['address']),
    ...mapGetters('user', ['addressInfo'])
  },
  methods: {
    ...mapMutations('user', ['updateAddress']),
    async addAddress() {
      const [err, success] = await uni.chooseAddress()
      if (err === null && success.errMsg === 'chooseAddress:ok') {
        this.updateAddress(success)
      }
      // console.log(err)
      if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) {
        // 通过调用这个方法让用户重新授权
        this.reAuth()
      }
    },
    // 让用户重新授权
    async reAuth() {
      const [err2, confirmResult] = await uni.showModal({
        content: '检测到您没打开地址授权，是否设置打开?',
        confirmText: '确认',
        cancelText: '取消'
      })
      // console.log(err2)
      
      if (err2) return
      if (confirmResult.cancel) return uni.$showMsg('您取消了地址授权！')
      if (confirmResult.confirmResult) return uni.openSetting({
        success: (settingResult) => {
          if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功。请选择地址')
          if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了地址授权')
        }
      })
    }
  }
};
</script>

<style lang="scss">
.adress-container {
  .add-adress {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
  }
  .adress-info {
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 12px;
    padding: 5px 5px 0 5px;
    .row1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user {
        display: flex;
        align-items: center;
      }
      .phone {
        display: flex;
        align-items: center;
      }
    }
    .row2 {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .user-adress {
        white-space: nowrap;
      }
    }
  }
  image {
    width: 100%;
    height: 5px;
    vertical-align: middle;
  }
}
</style>
